<style scoped>
    html,
    body,
    #app {
        height: 100%;
        min-width: 1260px;

    }

    #app {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .ivu-layout {
        height: 44px;
        background: transparent;
    }

    .ivu-layout-header {
        height: 44px;
        line-height: 44px;
        /* background:#2b85e4; */
        background: #2d8cf0;
        padding: 0 20px;
    }

    .layout {
        /* border: 1px solid #d7dde4; */
        background: #f5f7f9;
        position: relative;
        /* border-radius: 4px; */
        overflow: hidden;
    }

    .layout-logo {
        width: 500px;
        height: 44px;
        /* background: #5b6270; */
        /* border-radius: 3px; */
        float: left;
        position: relative;
        top: 0px;
        left: 0;
        font-size: 18px;
        color: white;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .layout-logo small {
        font-size: 12px;
        letter-spacing: 0;
    }

    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .layout-user {
        width: 100px;
        height: 44px;
        border-radius: 3px;
        float: right;
        position: relative;
        top: 0px;
        right: 0;
        font-size: 13px;
        color: white;
    }

</style>
<template>
    <div class="layout" id='app'>
        <Header>
            <div class="layout-logo">
                <!-- <img src="../assets/logo-white.png"> -->
                <img src="../../assets/2222.png" style="height: 40%;">
                <span style="font-family: YouYuan;">语云数据中间件1.0</span>&nbsp;&nbsp;
                <!-- <small>上次登陆：2019-08-29 13:25 &nbsp;&nbsp;北京市</small> -->
            </div>
            <div class="layout-user">
                <!--<img src="../assets/4.png">-->
                <Avatar style="background: #19be6b" icon="ios-person"></Avatar>&nbsp;
                <Dropdown trigger="click">
                    <a href="javascript:void(0)" style="color: white;">
                        {{username}}
                        <Icon type="md-arrow-dropdown" />
                    </a>
                    <DropdownMenu slot="list">
                        <router-link to='/changePassword'>
                            <DropdownItem>修改密码</DropdownItem>
                        </router-link>
                        <a @click="confirm">
                            <DropdownItem>注销</DropdownItem>
                        </a>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </Header>
        <Layout
            style="display:flex;position: absolute;top: 44px;bottom: 0px;overflow: hidden;width: 100%; height: auto;">

            <Layout :style="{padding: '14px 14px 14px 14px',height:'auto'}">
                <Content :style="{padding: '24px',  background: '#fff'}">
                    <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
                        <Col span="3" offset="21">
                        <div style="float: right;">
                            <router-link to="/sqlSearch">
                                <Button type="primary">退出全屏<Icon type="ios-contract" /></Button>
                            </router-link>
                        </div>
                        </Col>
                    </Row> 
                    <Row style="margin-bottom: 20px;">
                        <Col span="6">
                        每页显示:
                        <Input style="width: 60%;" />&nbsp;条
                        </Col>
                        <Col span="6">
                            <div style="float: right;">
                                分隔符:
                                <Input style="width: 65%;" value='/t' />
                            </div>
                        </Col>
                        <Col span="6">
                            搜索:
                            <Input style="width: 55%;" />
                            <Button type="text" style="color: #2d8cf0;">过滤</Button>
                        </Col>
                        <Col span="4" offset="2">
                            <div style="float: right;">
                                <Button type="text" @click="search" style="color: #2d8cf0;">
                                    展示/隐藏列
                                    </Button>
                            </div>
                        </Col>
                    </Row>
                    <Table :columns="httpColumns" :data="httpData"></Table>
                    <div style="float: right; margin-top: 15px">
                        <Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage"
                            @on-page-size-change="pages" show-elevator show-total></Page>
                    </div>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                username:'admin',
                dataCount: 0,
                pageSize: 10,
                ajaxHttpData: [],
                xia: 0,
                httpColumns: [
                    {
                        title: '编号',
                        width:100,
                        key: 'num',
                        align: 'center'

                    },
                    {
                        title: 'SQL任务名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '是否生成API',
                        width:120,
                        key: 'api',
                        align: 'center'
                    },
                    {
                        title: '最近修改时间',
                        key: 'time',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        // key: 'operate',
                        align: 'center',
                        render: (h, params) => {
                            const row = params.row;
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            size: 'small',
                                            type:'text'
                                        },
                                        style: {
                                            marginRight: '5px',
                                            color:'#2d8cf0'
                                        },
                                        on: {
                                            click: () => {
                                                //保存操作


                                            }
                                        }
                                    }, '保存'),
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color:'#2d8cf0'
                                    },
                                    on: {
                                        click: () => {
                                            // 执行操作


                                        }
                                    }
                                }, '执行'),
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color:'#2d8cf0'
                                    },
                                    on: {
                                        click: () => {
                                            //发布操作

                                        }
                                    }
                                }, '发布API')
                            ]);
                        }
                    }
                    

                ],
                httpData: [
                    {
                        num:'001',
                        name:'成本最高的前10个部门',
                        api:'是',
                        time:'2019-12-27 14:29:23'
                    },
                    {
                        num:'002',
                        name:'访问量最高的IP',
                        api:'是',
                        time:'2019-12-27 14:29:23'
                    },
                    {
                        num:'003',
                        name:'最热门关键词',
                        api:'是',
                        time:'2019-12-27 14:29:23'
                    },
                    {
                        num:'004',
                        name:'成本最高的前10个部门',
                        api:'是',
                        time:'2019-12-27 14:29:23'
                    },
                    {
                        num:'005',
                        name:'最热门关键词',
                        api:'是',
                        time:'2019-12-27 14:29:23'
                    },

                ]
            }
        },
        methods: {
           
        }
    }
</script>